<template>
    <div>
        <el-select v-model="value" :multiple="false" collapse-tags style="width: 100%" @change="handleChange"
            size="small" :placeholder="$t('labels.pleaseSelect')" @visible-change="handleVisible" :disabled ="disabled">
            <el-option v-for="item in datas" :key="item.id" :label="item.name" :value="item.id" :class="optionClass">
                <span style="float: left">{{ item.code }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.name
                }}</span>
            </el-option>
        </el-select>
    </div>
</template>
<script>
import { getWarehouse } from "@/api/warehouse";
export default {
    data() {
        return {
            datas: [],
            value: null,
            disabled: true
        };
    },
    model: {
        prop: "id",
        event: "innerChange",
    },
    methods: {
        getData() {
            if (!this.warehouseId) {
                this.datas = [];
                return;
            }
            getWarehouse(this.warehouseId).then((res) => {
                this.disabled = res ? !res.activateLocation : true;
                this.datas = res ? res.locations : [];
                this.value = this.id;
            });
        },
        handleChange(value) {
            this.$emit("innerChange", value);

            let selected = !value ? {} : this.datas.find((x) => x.id == value);
            this.$emit("change", selected);
        },
        handleVisible(visible) {
            this.$emit("visible-change", visible);
        },
    },
    watch: {
        id: {
            handler(val) {
                this.value = val;
            },
        },
        warehouseId: {
            handler(val) {
                this.value = null;
                this.getData();
            },
            immediate: true
        }
    },
    mounted() {

    },
    props: {
        id: {
            type: String,
        },
        warehouseId: {
            type: String
        },
        optionClass: {
            type: String,
            default: "",
        },
    },
};
</script>